<template>
  <div class="com-container">
    <div class="com-chart" ref="map_ref" @dblclick="outMap"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getChMap, getChChildrenMap, getchoiceMap } from "@/api";
import { getProvinceMapInfo } from "@/utils/map_utils.js";
export default {
  data() {
    return {
      echartsDom: null,
      childrenMap: {},
      mapData: null,
    };
  },
  watch: {
    style() {
      console.log("主题切换了");
      this.echartsDom.dispose(); // 销毁当前的图表
      this.initEachat(); // 重新以最新的主题名称初始化图表对象
      this.screenAdapter(); // 完成屏幕的适配
      this.upData(); // 更新图表的展示
    },
  },
  computed: {
    ...mapState(["style"]),
  },
  mounted() {
    this.initEachat();
    this.getData();
    this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 获取数据
    async getData() {
      this.mapData = await getchoiceMap();
      this.upData();
    },
    // 初始化Eachats元素
    async initEachat() {
      this.echartsDom = this.$echarts.init(this.$refs.map_ref, this.style); //第一个参数是dom元素，第二个是主题
      let data = await getChMap();
      this.$echarts.registerMap("china", data);
      const initOption = {
        title: {
          text: "▎商家分布",
          left: 20,
          top: 20,
        },
        geo: {
          type: "map",
          map: "china",
          top: "5%",
          bottom: "5%",
          itemStyle: {
            areaColor: "#2172BF",
            borderColor: "#333",
          },
        },
        legend: {
          left: "5%",
          bottom: "5%",
          orient: "vertical",
        },
      };
      this.echartsDom.setOption(initOption);
      this.echartsDom.on("click", (arg) => {
        let { key } = getProvinceMapInfo(arg.name);
        console.log(this.childrenMap);
        if (!key) return;
        if (this.childrenMap[key]) {
          const changeMapoption = {
            geo: {
              map: key,
            },
          };
          this.echartsDom.setOption(changeMapoption);
        } else {
          getChChildrenMap(key).then((res) => {
            this.childrenMap[key] = res;
            this.$echarts.registerMap(key, res);
            const changeMapoption = {
              geo: {
                map: key,
              },
            };
            this.echartsDom.setOption(changeMapoption);
          });
        }
      });
    },
    // 浏览器大小变化
    screenAdapter() {
      const titleFontSize = (this.$refs.map_ref.offsetWidth / 100) * 3.6;
      let adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize / 2,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
      };
      this.echartsDom.setOption(adapterOption);
      this.echartsDom.resize();
    },
    // 更新页面元素
    upData() {
      let legendData = this.mapData.map((item) => item.name);
      let seriesData = this.mapData.map((item) => {
        return {
          name: item.name,
          type: "effectScatter",
          data: item.children,
          coordinateSystem: "geo",
          rippleEffect: {
            scale: 5,
            brushType: "stroke",
          },
        };
      });
      const initOption = {
        series: seriesData,
        legend: {
          data: legendData,
        },
      };
      this.echartsDom.setOption(initOption);
    },
    outMap() {
      const changeMapoption = {
        geo: {
          map: "china",
        },
      };
      this.echartsDom.setOption(changeMapoption);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>